<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view v-show="ischartList">
			<view class="tui-nomore-class tui-loadmore-none">
				<view class="tui-nomore">
					<view class="tui-nomore-text" style="background: rgb(250, 250, 250);"></view>
				</view>
			</view>
		</view>
		<view v-show="chartList.length>0">
			<uni-list-item :showArrow="false" v-for="(item,index) in chartList" :key="index">
				<!-- <view class="cu-bar bg-white">
					<view class="action" style="font-size: 16px; margin-left: 0;">
						<text class="title-Icon"><span></span></text>
						<text class="margin-left"><span>{{item.title}}</span></text>
					</view>
				</view> -->
				<view class="chart-top">
					<view class="chart-people">
						<view>指标名称：{{ item.title }}</view>
						<view>指标范围：{{ item.busRange }}</view>
						<view>承担人：{{ item.dutyUserName }}</view>
					</view>
					<view class="chart-type">
						<om-combox style="font-size: 10px;" :status="false" label="" labelWidth="100px" @changeValue="changeIndex(arguments,item)"
						 :candidates="item.listTitle" placeholder="请选择图表类型"></om-combox>
					</view>
				</view>
				<text style="font-size: 10px; margin-top: 64px;">{{item.yname.substring(item.yname.indexOf('（'),item.yname.length) }}
					<!-- <text style="margin-left: 40px;">{{item.title}}</text> -->
				</text>
				<view class="chart-cont">
					<view class="chart-tb">
						<om-ucharts :chartType="item.type" :opts="item" :canvasId="'canvas'+index"></om-ucharts>
					</view>
					<view class="chart-tx"><view class="desc">{{item.xname}}</view></view>
				</view>
				<!-- <view style="font-size: 10px;">{{item.xname}}</view>
				<om-ucharts :chartType="item.type" :opts="item" :canvasId="'canvas'+index"></om-ucharts> -->
			</uni-list-item>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '指标图表',
				chartList: [],
				dutyUserName: '',
				busRange: '',
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				searchObj: {},
				ischartList: false,
			};
		},
		methods: {
			changeIndex(info, item) {
				this.$set(item, "type", item.listValue[info[1]])
			},
			getDataList(){
				let _that = this;
				let obj = _that.searchObj
				obj.page = _that.pageNum
				obj.rows = _that.pageSize
				_that.om.request("indexList/getIndexEchartList",obj,'post').then(res=>{
					let arr = []
					for (let index in res.value) {
						let obj = {
							categories: [],
							series: [],
							title: "",
							type: 'line'
						}
						obj.categories = res.value[index].xAxis.data
						obj.series = res.value[index].series
						obj.title = res.value[index].title
						obj.yname = res.value[index].yAxis.name
						obj.xname = res.value[index].xAxis.name
						obj.listTitle = ["折线图", "柱状图", "累计图"]
						obj.listValue = ["line", "column", "cumulative"]
						obj.busRange = res.value[index].map.userName.indexCategoryName
						obj.dutyUserName = res.value[index].map.userName.userName
						obj.nowYear = _that.searchObj.year
						arr.push(obj)
					}
					// _that.pageTotal = res.value.totalPage
					_that.chartList = _that.chartList.concat(arr)
					if(_that.chartList.length == 0){
						_that.ischartList = true
					}
				})
			},
		},
		onLoad(data) {
			let _that = this;
			_that.searchObj = {}
			_that.searchObj.year = data.year
			_that.searchObj.orgin = data.orgin
			_that.searchObj.instIds = data.instIds
			_that.searchObj.userId = data.userId
			_that.getDataList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style>
	.tui-nomore::after {
		content: '没有图表';
	}
	.chart-cont{
		display: flex;
	}
	.chart-tb{
		flex: 1;
	}
	.chart-tx{
		font-size: 10px;
		width: 12px;
		position: relative;
	}
	.chart-tx .desc{
		position: absolute;
		bottom: 50px;
	}
	.title-Icon{
		width: 6px;
		height: 18px;
		border-radius: 3px;
		margin-left: 3px;
		background-color: #39B54A;
	}
	.chart-top{
		position: absolute;
		top: 5px;
		width: 100%;
		display: flex;
	}
	.chart-people{
		flex: 1;
		line-height: 16px;
		font-size: 12px;
	}
	.chart-type{
		height: 34px;
		width:105px;
		border-bottom: 1px solid #1890FF;
		margin: 13px 20px 0 0;
	}
</style>                                                                                               
